<template>
  <report-search></report-search>
  <ele-pro-table
    ref="tableRef"
    row-key="id"
    :columns="columns"
    :datasource="datasource"
    :show-overflow-tooltip="true"
    v-model:selections="selections"
    :highlight-current-row="true"
    :where="defaultWhere"
    :load-on-created="false"
    cache-key="jimuReportTable"
  >
    <template #action="{ row }">
      <el-link type="success" underline="never" @click="openShow(row)">
        查看
      </el-link>
    </template>
  </ele-pro-table>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import {
  PlusOutlined,
  DeleteOutlined,
  DownloadOutlined
} from '@/components/icons';
import { ElMessageBox } from 'element-plus';
import { EleMessage } from 'ele-admin-plus';
import ReportSearch from './report-search.vue';
// import ReportEdit from './report-edit.vue';
import {
  pageReports,
  removeReports,
  exportReports,
  updateReportStatus
} from '@/api/manage/jimu/report';

const props = defineProps({
  typeId: Number
});

/** 表格实例 */
const tableRef = ref(null);
/** 表格列配置 */
const columns = ref([
  {
    type: 'index',
    columnKey: 'index',
    width: 50,
    align: 'center',
    fixed: 'left'
  },
  {
    prop: 'title',
    label: '标题',
    align: 'left',
    minWidth: 110
  },
  {
    prop: 'version',
    label: '版本',
    align: 'center',
    minWidth: 90
  },
  {
    prop: 'orderNum',
    label: '排序',
    align: 'center',
    minWidth: 70
  },
  {
    columnKey: 'action',
    label: '操作',
    width: 180,
    align: 'center',
    slot: 'action',
    hideInPrint: true,
    hideInExport: true
  }
]);

/** 表格选中数据 */
const selections = ref([]);

/** 当前编辑数据 */
const current = ref(null);

/** 是否显示编辑弹窗 */
const showEdit = ref(false);

/** 表格数据源 */
const datasource = ({ pages, where }) => {
  return pageReports({ ...where, ...pages });
};

/** 搜索 */
const reload = (where) => {
  tableRef.value?.reload?.({ page: 1, where });
};

/** 默认搜索条件 */
const defaultWhere = reactive({
  typeId: props.typeId
});

/** 打开编辑弹窗 */
const openEdit = (row) => {
  // if (!props.typeId) {
  //   EleMessage.warning({message: '请先在左侧选择报表的分类', plain: true});
  //   return;
  // }
  current.value = row ?? null;
  showEdit.value = true;
};

/** 批量删除 */
const removeBatch = (row) => {
  const rows = row == null ? selections.value : [row];
  if (!rows.length) {
    EleMessage.error({ message: '请至少选择一条数据', plain: true });
    return;
  }
  ElMessageBox.confirm(
    `是否确认删除标题为"${rows.map((d) => d.title).join()}"的数据项?`,
    '系统提示',
    { type: 'warning', draggable: true }
  )
    .then(() => {
      const loading = EleMessage.loading({
        message: '请求中..',
        plain: true
      });
      removeReports(rows.map((d) => d.id))
        .then(() => {
          loading.close();
          EleMessage.success({ message: '删除成功', plain: true });
          reload();
        })
        .catch((e) => {
          loading.close();
          EleMessage.error({ message: e.message, plain: true });
        });
    })
    .catch(() => {});
};

/**
 * 显示报表
 * @param row
 */
const openShow = (row) => {
  window.open(row.url);
};

watch(
  () => props.typeId,
  (typeId) => {
    if (typeId) {
      defaultWhere.typeId = props.typeId;
      tableRef.value?.reload?.(); //刷新当前表格
    }
  }
);
</script>
